<template>
  <div class="EggMachine_home">
    <div class="eggMachine">
      <div class="eggMachine-body"></div>
      <div
        class='eggMachine-box'
        ref='refEggMachine'
      >
        <canvas ref='refCanvas'></canvas>
      </div>
      <div class="eggMachine-btn" :class="{ disabled }" @click="play"></div>
    </div>
    <div class="egg_data">
      <van-cell-group inset>
        <van-field type="number" :maxlength="2" v-model="state.speed" label="扭蛋速度" placeholder="扭蛋速度" />
        <van-field type="number" v-model="state.duration" label="动画持续时间" placeholder="动画持续时间" />
        <van-button type="primary" block @click="change">确认修改</van-button>
      </van-cell-group>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { EggMachine } from './EggMachine';
import { reactive } from 'vue';
import { nextTick } from 'vue';


export default defineComponent({
  name: 'Home',
  setup () {
    const refCanvas = ref()
    const refEggMachine = ref()
    let eggMachine: EggMachine
    const disabled = ref(false)

    const state = reactive({
      speed: 20,
      duration: 5000,
    })

    let timer: number
    const play = () => {
      if (disabled.value) return
      disabled.value = true
      eggMachine.startAnimation()
      timer = setTimeout(() => {
        eggMachine.stopAnimation()
        disabled.value = false
      }, state.duration)
    }

    const change = () => {
      clearTimeout(timer)
      eggMachine.stopAnimation()
      eggMachine.set.speed = state.speed
      disabled.value = false
    }

    onMounted(() => {
      eggMachine = new EggMachine(refEggMachine.value, refCanvas.value, true)
    })

    return {
      refCanvas,
      refEggMachine,
      disabled,
      state,
      play,
      change,
    }
  }
});
</script>


<style lang="less">
@media (max-width: 480px)  {
  .egg_data {
    display: none;
  }
}
.EggMachine_home {
  .egg_data {
    position: absolute;
    left: 640px * 0.7;
    top: 20px;
  }

  .eggMachine {
    background-image: url('~@/assets/imgs/homeBg.jpg');
    background-position-y: -510px;
    background-repeat: no-repeat;
    position: relative;
    width: 640px * 0.7;
    height: 750px;
    display: flex;
    justify-content: center;
    &-body {
      width: 600px * 0.7;
      height: 710px * 0.7;
      background-image: url('~@/assets/imgs/thomasBox.png');
      background-size: 100% 100%;
    }
    &-box {
      position: absolute;
      top: 80px;
      left: 62px;
      width: 460px * 0.7;
      height: 290px * 0.7;
      canvas {
        width: 100%;
        height: 100%;
      }
    }
    &-btn {
      position: absolute;
      top: 333px;
      left: 122px;
      width: 300px * 0.7;
      height: 140px * 0.7;
      background-image: url('~@/assets/imgs/startBtn.png');
      background-size: 100% 100%;
      cursor: pointer;
    }
    &-btn.disabled {
      filter: grayscale(100%);
      cursor: not-allowed;
    }
    &-btn:active {
      transform: scale(0.95);
    }
    &-btn.disabled:active {
      transform: none;
    }
  }
}
</style>
